<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" >
     <el-form :inline="true" :model="filters" :size="size" >
        <el-row class="search-input">
          <el-form-item label="商品名称：">
            <el-input v-model="filters.orderNo" placeholder="商品名称"></el-input>
          </el-form-item>

          <el-form-item label="订单号：">
            <el-input v-model="filters.orderNo" placeholder="订单号"></el-input>
          </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')" />
          </el-form-item>
          </el-row>
          <el-form-item  class="w100 t_r">
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
            </el-tooltip>
            <el-tooltip content="导出" placement="top">
              <el-button icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item>

      </el-form>
    </div>
    <cy-table
      :operationWidth='300'
      :height="350"
      :data="pageResult"
      :columns="filterColumns"
      :showBatchDelete="false"
      :showDeleteOperation="false"
      :showSelection="false"
      :showDetailOperation="false"
      :showEditOperation="false"
      :showOperation="false"
      @findPage="findPage"
      ref="CyTable"
    ></cy-table>

    <!--分销员弹框-->
    <el-dialog title="添加商家" width="30%" :visible.sync="editDialogVisible" :close-on-click-modal="false" @closed="handleClose">
      <el-form :model="dataForm" label-width="140px" :rules="dataFormRules" ref="dataForm" :size="size" >
         <el-row class="searchDialog-input">
            <el-form-item label="手机号码："  prop="mobile">
          <!-- <el-input v-model="dataForm.mobile" auto-complete="off" :disabled="false" placeholder="请输入手机号码" ></el-input> -->
            <el-select
              style="width: 456px;"
              v-model="dataForm.mobile"
              clearable
              filterable
              remote
              reserve-keyword
              placeholder="请输入会员手机号码"
              :remote-method="remoteMethod"
              @change="choseCustomer"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.mobile"
                :value="item.id"
              ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="昵称："  prop="nickname" class="serarch-inner">
          <el-input v-model="dataForm.nickname" auto-complete="off" :disabled="false" placeholder="请输入"></el-input>
        </el-form-item>
         </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading" >{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton"
import CyTable from "@/views/Core/JicTable";
export default {
    components: {
      KtButton,
      CyTable
    },
    data() {
      return {
        options:[],
        editDialogVisible:false,
        editLoading:false,
        size:"mini",
        columns: [
          {prop: "orderNumber", label: "订单号", minWidth: 120},
          {prop: "productName", label: "商品名称", minWidth: 120},
          {prop: "productNumber", label: "商品数量", minWidth: 120},
          {prop: "inputPrice", label: "商品采购价", minWidth: 120},
          {prop: "salePrice", label: "商品销售价", minWidth: 120},
          {prop: "orderAccount", label: "订单金额", minWidth: 120},
          {prop: "grossProfit", label: "毛利", minWidth: 120},
          {prop: "grossProfitTate", label: "毛利率", minWidth: 120},
          {prop: "createTime", label: "交易日期", minWidth: 120},
        ],
        filterColumns:[],
        pageRequest: { pageNum: 1, pageSize: 10 },
        pageResult: {},

        filters: {
          name: "",
          res: {
            total: 3,
            code: "0000",
            rows: [
              {
                orderNumber: "O20200603008",
                productName:"红酒",
                productNumber: 20,
                inputPrice:100,
                salePrice: 120,
                orderAccount: 2400,
                grossProfit: 20,
                grossProfitTate: 20,
                createTime: "2020-06-03",

              }, {
                orderNumber: "O20200603008",
                productName:"白酒",
                productNumber: 20,
                inputPrice:100,
                salePrice: 120,
                orderAccount: 2400,
                grossProfit: 20,
                grossProfitTate: 20,
                createTime: "2020-06-03",

              },
              {
                orderNumber: "O20200603008",
                productName:"葡萄酒",
                productNumber: 20,
                inputPrice:100,
                salePrice: 120,
                orderAccount: 2400,
                grossProfit: 20,
                grossProfitTate: 20,
                createTime: "2020-06-03",

              },
            ]
          }
        },
        dataForm:{},
        dataFormRules:{

        },
      }
    },
    methods:{
         // 获取分页数据
        findPage: function (data) {
          this.$refs.CyTable.findPageStaticState(this.filters);
        },
        //查询后台member表信息
        remoteMethod: function(query) {
          if (query !== "" && query.length>0) {
            //查询后台客户信息
            var search = {};
            search.mobile = query;
            var this_ = this;
            this.utils.request.queryMemberList(search, function(res) {
              this_.options = res.data.rows;
            });
          } else {
            this.options = [];
          }
        },
        //模糊匹配
        choseCustomer: function(selVal) {
          var temp = this.options;
          var this_ = this;
          if (selVal == "" || selVal == null) {
            this_.dataForm.id="";
            this_.dataForm.nickname = "";
            this_.dataForm.mobile = "";
          } else {
            $.each(temp, function(key, val) {
              if (val.id == selVal) {
                this_.dataForm.id = val.id;
                this_.dataForm.nickname = val.nickname;
                this_.dataForm.mobile = val.mobile;
                this_.dataForm = Object.assign({}, this_.dataForm);
                return;
              }
            });
          }
        },
        //设置分销员
        setDis(){
          this.editDialogVisible=true;
        },
        //提交按钮
        submitForm(){
          this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              let params = Object.assign({}, this.dataForm);
              var this_ = this;
              this.utils.request.editDistributorInfo(params, function (res) {
                if (res.code == "0000") {
                  this_.$message({message: "操作成功", type: "success"});

                  this_.editDialogVisible = false;
             
                  this_.findPage(null);
                } else {
                  this_.$message({
                    message: "操作失败, " + res.msg,
                    type: "error"
                  });
                }
              });
            });
          }
        });
      },
        resetForm(formName) {
            if (this.$refs[formName] != undefined) {
                this.$refs[formName].resetFields();
                this.findPage(null);
            }
        },
      // 列表下载
        downloadExcel() {
          this.$confirm('确定下载列表文件?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let filename = "销售订单报表"
            this.$refs.CyTable.exportData(this.filters, this.filterColumns, filename)
          }).catch(() => {

          });
        },
      statusFormat: function(row, column, cellValue, index){
        if(cellValue==10){
          return '已完成'
        }else if(cellValue==1){
          return '待支付'
        }else if(cellValue==2){
          return '已支付'
        }else if(cellValue==3){
          return '待发货'
        }else if(cellValue==4){
          return '已发货'
        }else if(cellValue==5){
          return '确认收货'
        }else if(cellValue==6){
          return '待评价'
        }else if(cellValue==7){
          return '已关闭'
        }else if(cellValue==8){
          return '付款处理中'
        }else if(cellValue==9){
          return '已退款'
        }
      },
      payStatusFormat: function(row, column, cellValue, index){
        if(cellValue==1){
          return '待支付'
        }else if(cellValue==2){
          return '已支付'
        }else if(cellValue==3){
          return '已关闭'
        }else if(cellValue==4){
          return '部分关闭'
        }
      },
      payTypeFormat : function(row, column, cellValue, index){
        if(cellValue==1){
          return '网上支付'
        }else if(cellValue==2){
          return '线下支付'
        }
      },
        handleClose() {
          this.$refs.dataForm.resetFields();
        },
        // 处理表格列过滤显示
        displayFilterColumnsDialog: function() {
            this.$refs.tableColumnFilterDialog.setDialogVisible(true);
        },
        // 处理表格列过滤显示
        handleFilterColumns: function(data) {
            this.filterColumns = data.filterColumns;
            this.$refs.tableColumnFilterDialog.setDialogVisible(false);
        },
        // 处理表格列过滤显示
        initColumns: function() {
            var temp = [];

            $.each(this.columns, function(key, val) {
                temp.push(val);
            });
            this.filterColumns = temp;
        },  
    },
    mounted() {
        this.initColumns();
        this.findPage();
        // this.memberTypeLists();
    }
}
</script>

<style scoped lang="scss">
</style>
